<?php

namespace JsonLowCode\UI;

use JsonLowCode\Schema;
use JsonLowCode\Traits\Events\HasModelValueEvent;
use JsonLowCode\Traits\Props\HasDefaultValue;
use JsonLowCode\Traits\Props\HasDisabled;
use JsonLowCode\Traits\Props\HasShow;
use JsonLowCode\Traits\Props\HasSize;
use JsonLowCode\Traits\Props\HasTo;
use JsonLowCode\Traits\Props\HasValue;
use JsonLowCode\Traits\Slots\HasSlotLabel;

class ColorPicker extends Schema
{
    protected string $componentName = "NColorPicker";

    use HasDefaultValue, HasShow, HasSize, HasDisabled, HasValue, HasTo;

    use HasModelValueEvent;

    use HasSlotLabel;

    /**
     * 默认是否展示弹出层
     * @param bool|string $bool
     * @return $this
     */
    public function defaultShow(bool|string $bool = true): static
    {
        return $this->prop('default-show', $bool);
    }

    /**
     * 面板的弹出位置
     * 颜色选择器支持颜色的格式，注意一旦你在某个模式下选择了值，颜色选择器值的格式将跟随这个格式
     * @param string|array $modes ['rgb' | 'hex' | 'hsl' | 'hsv']
     * @return $this
     */
    public function modes(string|array $modes = ['rgb']): static
    {
        $this->prop('modes', $modes);
        return $this;
    }

    /**
     * 色板的值
     * @param string|array $swatches
     * @return $this
     */
    public function swatches(string|array $swatches = []): static
    {
        $this->prop('swatches', $swatches);
        return $this;
    }

    /**
     * 面板的弹出位置
     * @param string $placement 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'
     * @return $this
     */
    public function placement(string $placement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'): static
    {
        return $this->prop("placement",$placement);
    }

    /**
     * 是否可调节 alpha 通道
     * @param bool|string $bool
     * @return $this
     */
    public function showAlpha(bool|string $bool = true): static
    {
        return $this->prop('show-alpha', $bool);
    }

    /**
     * 是否展示颜色预览块
     * @param bool|string $bool
     * @return $this
     */
    public function showPreview(bool|string $bool = true): static
    {
        return $this->prop('show-preview', $bool);
    }

    /**
     * 触发器的内容 (color: string | null) => VNodeChild
     * @param string $render
     * @return $this
     */
    public function renderLabel(string $render): static
    {
        return $this->slot('render-label', $render);
    }


    /**
     * 颜色完成改变后的回调（在鼠标移动时候不会调用）
     * @param string $value (value: string) => void
     * @return $this
     */
    public function onComplete(string $value = '(value) => void'): static
    {
        return $this->events('on-complete', $value);
    }

    /**
     * 点击确定按钮的回调
     * @param string $value (value: string) => void
     * @return $this
     */
    public function onConfirm(string $value = '(value) => void'): static
    {
        return $this->events('on-confirm', $value);
    }


    /**
     * 显示按钮
     * @param string|array|null $actions Array<'confirm' | 'clear'> | null
     * @return $this
     */
    public function actions(string|array $actions = null): static
    {
        $this->prop('actions', $actions);
        return $this;
    }


}
